<template>
  <div class="app-container">
    <div class="filter-container">
      <div>
        <el-button type="primary" class="filter-item" icon="el-icon-edit" @click="linkToCreate">新增分类</el-button>
        <!-- <el-select v-model="parentId" placeholder="请选择">
          <el-option
            v-for="item in firstSortList"
            :key="item.catId"
            :label="item.name"
            :value="item.catId"
          ></el-option>
        </el-select>
        <el-button @click="searchSort" type="primary" icon="el-icon-search">搜索</el-button>-->
      </div>
    </div>

    <el-table
      :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
      :data="tableData"
      fit
      highlight-current-row
      style="width: 100%;font-size: 12px;color:#222;font-family: PingFangSC-Regular;"
    >
      <el-table-column align="center" label="编号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.catId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" width="60" height="60" v-show="scope.row.avatar" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="一级分类">
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.parentId == 1 ? scope.row.name : scope.row.parentName }}</span> -->
          <span>{{ scope.row.type == 1 ? scope.row.name : scope.row.parentNames }}</span>
          <!-- <span>{{ scope.row.parentName||scope.row.parentNames ?  scope.row.parentNames : scope.row.name}}</span> -->
        </template>
      </el-table-column>
      <el-table-column align="center" label="二级分类">
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.parentId != 0 ? scope.row.name : scope.row.parentName }}</span> -->
          <span>{{ scope.row.type == 2 ? scope.row.name : scope.row.parentName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="三级分类">
        <template slot-scope="scope">
          <span>{{ scope.row.type == 3 ? scope.row.name : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="状态" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 1 ? '开启' : '关闭' }}</span>
        </template>
      </el-table-column>-->
      <el-table-column align="center" label="操作" width="220">
        <template slot-scope="scope">
          <b v-if="permission == 3" @click="linkToEdit(scope.row.catId)">编辑</b>
          <span v-if="permission == 3" class="color-409">|</span>
          <b v-if="permission == 3" @click="handleDelete(scope.$index, scope.row.catId)">删除</b>
          <span v-if="permission == 3" class="color-409">|</span>
          <b
            @click="editStatus(scope.row.catId, scope.row.status)"
          >{{scope.row.status == 1 ?'停用' :'启用'}}</b>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getCourseCategoryList,
  deleteCourseCategory,
  getParentCategories,
  getChildCategories,
  UpdateStatus
} from "@/api/courseCategory";
import { shopManage_courseCategory } from "@/utils/permission";
export default {
  data() {
    return {
      permission: 3,
      total: null,
      tableData: [],
      firstSortList: [],
      listQuery: {
        page: 1,
        limit: 20
      },
      listLoading: false,
      parentId: ""
    };
  },
  created() {
    this.getModelPermission();
    this.initList();
    this.initOption();
  },
  methods: {
    async editStatus(catId, status) {
      var statuss = status == 1 ? 0 : 1;
      await UpdateStatus({ catId: catId, status: statuss }).then(res => {
        this.$message({
          type: "success",
          message: res.data.data
        });
      });
      this.initList();
    },
    getModelPermission() {
      this.permission = shopManage_courseCategory();
    },
    searchSort() {
      getChildCategories(this.parentId).then(res => {
        this.tableData = res.data.data;
      });
    },
    initOption() {
      getParentCategories()
        .then(res => {
          this.firstSortList.push(...res.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    initList() {
      this.listLoading = true;
      getCourseCategoryList(this.listQuery)
        .then(res => {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleDelete(index, id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          deleteCourseCategory(id)
            .then(res => {
              this.listLoading = true;
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              // this.tableData.splice(index, 1)
              this.$router.go(0);
            })
            .catch(err => {
              this.listLoading = true;
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    linkToCreate() {
      this.$router.push({ name: "createCategory" });
    },
    linkToEdit(id) {
      this.$router.push({ name: "editCategory", params: { catId: id } });
    },
    linkToCourse(catId, parentId) {
      this.$router.push({
        path: "/courseCategory/list",
        query: { from: "category" }
      });
      localStorage.setItem("childId", parseInt(catId));
      localStorage.setItem("parentId", parseInt(parentId));
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.initList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.initList();
    }
  }
};
</script>
